Skip to content

Update flow configuration and adjust positioning#509

Merged
stijnpotters1 merged 10 commits into
masterfrom
fix/improve-edge-dots-positioning
Jun 3, 2026
Merged

Update flow configuration and adjust positioning#509
stijnpotters1 merged 10 commits into
masterfrom
fix/improve-edge-dots-positioning

Conversation

@stijnpotters1
Copy link
Copy Markdown
Contributor

Zoomed out nodes now also has centered edge dots
image
image

@stijnpotters1 stijnpotters1 linked an issue May 27, 2026 that may be closed by this pull request
@Matthbo
Copy link
Copy Markdown
Member

Matthbo commented May 27, 2026

image The smaller text seems to be partially hidden when the text gets too long, the background doesn't grow in width when that happens either which now makes it seem like the margin around those components are very arbitrarily decided instead of being calculated. Is white a good colour for it? Maybe not having a background and border could look nicer

@philipsens
Copy link
Copy Markdown
Member

Is white a good colour for it? Maybe not having a background and border could look nicer

Then the connections might look like there floating.
Maybe an alternative could be, is to position the connection points to the "icon" and place the text above and below it.

We should keep in mind that icons should be used in the future.

I think text should be bigger anyway.

Here are some options:

image

@Matthbo
Copy link
Copy Markdown
Member

Matthbo commented May 27, 2026

I think the left middle one has the most potential, if the forwards are merged towards one point (in the case of many forwards) then this would look very neat

@philipsens
Copy link
Copy Markdown
Member

I think the left middle one has the most potential, if the forwards are merged towards one point (in the case of many forwards) then this would look very neat

Ah yes, so some pipes have many forwards, which might not fit or will go over the text. In the zoomed-out mode, it might be fine to merge everything.

@stijnpotters1
Copy link
Copy Markdown
Contributor Author

I have improved the styling according to the feedback.
Only the initials have to be changed for icons, but i have made this issue for it #514
image

@philipsens
Copy link
Copy Markdown
Member

So I was wondering, is it still possible to draw a line now?
Also. Why don't the pipes have connection points on the left side? Just to make it look better? I hadn't thought about it. It does look clean, albeit a bit strange maybe.

@stijnpotters1
Copy link
Copy Markdown
Contributor Author

stijnpotters1 commented Jun 1, 2026

So I was wondering, is it still possible to draw a line now? Also. Why don't the pipes have connection points on the left side? Just to make it look better? I hadn't thought about it. It does look clean, albeit a bit strange maybe.

yes it is still possible to draw a line:
image
image

I will apply the other feedback too?

@stijnpotters1
Copy link
Copy Markdown
Contributor Author

@philipsens i fixed it and now it looks like this:
image

@stijnpotters1 stijnpotters1 self-assigned this Jun 1, 2026
@philipsens
Copy link
Copy Markdown
Member

So I was wondering, is it still possible to draw a line now? Also. Why don't the pipes have connection points on the left side? Just to make it look better? I hadn't thought about it. It does look clean, albeit a bit strange maybe.

yes it is still possible to draw a line: image image

I will apply the other feedback too?

Looks nice! But for the dragging part, you don't know which forward it will get, right? Isn't that totally confusing?

Comment thread src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx Outdated
@stijnpotters1
Copy link
Copy Markdown
Contributor Author

So I was wondering, is it still possible to draw a line now? Also. Why don't the pipes have connection points on the left side? Just to make it look better? I hadn't thought about it. It does look clean, albeit a bit strange maybe.

yes it is still possible to draw a line: image image
I will apply the other feedback too?

Looks nice! But for the dragging part, you don't know which forward it will get, right? Isn't that totally confusing?

image

@stijnpotters1 stijnpotters1 requested a review from Matthbo June 2, 2026 11:21
@Matthbo
Copy link
Copy Markdown
Member

Matthbo commented Jun 2, 2026

image

Is it me or does the alignment not match between the options and the top text?
The top text also seems to not be vertically centered

Comment thread src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx Outdated
@Matthbo
Copy link
Copy Markdown
Member

Matthbo commented Jun 2, 2026

@philipsens other than the text alignment, does it look good to you?

@stijnpotters1 stijnpotters1 force-pushed the fix/improve-edge-dots-positioning branch from 83df281 to 303d7f9 Compare June 2, 2026 13:10
@stijnpotters1 stijnpotters1 force-pushed the fix/improve-edge-dots-positioning branch from 303d7f9 to 0ba67ee Compare June 2, 2026 13:19
@stijnpotters1
Copy link
Copy Markdown
Contributor Author

image

Is it me or does the alignment not match between the options and the top text? The top text also seems to not be vertically centered

image Fixed it

@stijnpotters1 stijnpotters1 requested a review from Matthbo June 2, 2026 13:20
Copy link
Copy Markdown
Member

@Matthbo Matthbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, let's wait on Sergi's opinion

@philipsens
Copy link
Copy Markdown
Member

philipsens commented Jun 3, 2026

Selection looks good. I'm not sure how consistent it is with the kebab menu, though.

I saw this, however:

image

Where first all forwards were grey, they are now colored. I think this is buggy or wrong in this screenshot because there are two forwards and the color indicates success.

@stijnpotters1
Copy link
Copy Markdown
Contributor Author

I have improved the coloured dots
image

@stijnpotters1 stijnpotters1 requested a review from Matthbo June 3, 2026 08:49
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Jun 3, 2026

Copy link
Copy Markdown
Member

@Matthbo Matthbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks good for now, the positioning can obviously be improved even more with a better algorithm but adding that to this pr would be overkill

@stijnpotters1 stijnpotters1 merged commit ff9767b into master Jun 3, 2026
5 checks passed
@stijnpotters1 stijnpotters1 deleted the fix/improve-edge-dots-positioning branch June 3, 2026 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Forward circles are not centered for large adapters

3 participants